<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="{{OssUrl}}/resource/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="{{OssUrl}}/resource/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="{{OssUrl}}/resource/css/main/animate.min.css" rel="stylesheet"/>
    <link href="{{OssUrl}}/resource/css/main/style.min862f.css" rel="stylesheet"/>
</head>


<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">本月</span>
                    <h5>注册用户数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">100</h1>
                    <div class="stat-percent font-bold text-success"><i class="fa fa-level-up"></i>
                    </div>
                    <small>人</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">累计</span>
                    <h5>注册用户数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">800</h1>
                    <div class="stat-percent font-bold text-info"><i class="fa fa-level-up"></i>
                    </div>
                    <small>人</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">本月</span>
                    <h5>充值金额</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">120</h1>
                    <div class="stat-percent font-bold text-success"><i class="fa fa-level-up"></i>
                    </div>
                    <small>元</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">累计</span>
                    <h5>充值金额</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">600</h1>
                    <div class="stat-percent font-bold text-info"><i class="fa fa-level-up"></i>
                    </div>
                    <small>元</small>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>往年充值人数对比</h5>
                </div>
                <div class="ibox-content">
                    <div class="flot-chart" style="height: 390px">
                        <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>通知公告</h5>
                </div>

                <div class="ibox-content">
                    <div class="feed-activity-list">

                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>

                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>

                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>

                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>


                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>
                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>
                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>

                        <div class="feed-element">
                            <div>
                                <small class="pull-right text-navy">2018-01-01</small>
                                <strong>测试啦</strong>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{OssUrl}}/resource/js/jquery.min.js"></script>
<script src="{{OssUrl}}/js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="{{OssUrl}}/resource/js/bootstrap.min.js"></script>
<script src="{{OssUrl}}/js/plugins/flot/jquery.flot.js"></script>
<script src="{{OssUrl}}/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="{{OssUrl}}/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="{{OssUrl}}/js/plugins/flot/jquery.flot.resize.js"></script>
<script src="{{OssUrl}}/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="{{OssUrl}}/js/plugins/flot/jquery.flot.symbol.js"></script>
<script src="{{OssUrl}}/js/plugins/peity/jquery.peity.min.js"></script>
<script src="{{OssUrl}}/js/plugins/easypiechart/jquery.easypiechart.js"></script>
<script src="{{OssUrl}}/js/plugins/sparkline/jquery.sparkline.min.js"></script>

<script>

    $(document).ready(function () {

        var data2 = new Array([1325347200000, 7], [1325433600000, 6], [1325520000000, 4], [1325606400000, 8], [1325692800000, 9], [1325779200000, 7], [1325865600000, 5], [1325952000000, 4], [1326038400000, 7], [1326124800000, 8], [1326211200000, 9], [1326297600000, 6], [1326384000000, 4], [1326470400000, 5], [1326556800000, 11], [1326643200000, 8], [1326729600000, 8], [1326816000000, 11], [1326902400000, 11], [1326988800000, 6], [1327075200000, 6], [1327161600000, 8], [1327248000000, 11], [1327334400000, 13], [1327420800000, 7], [1327507200000, 9], [1327593600000, 9], [1327680000000, 8], [1327766400000, 5], [1327852800000, 8], [1327939200000, 25]);
        var data3 = new Array([1325347200000, 700], [1325433600000, 600], [1325520000000, 400], [1325606400000, 800], [1325692800000, 900], [1325779200000, 700], [1325865600000, 500], [1325952000000, 400], [1326038400000, 700], [1326124800000, 800], [1326211200000, 900], [1326297600000, 600], [1326384000000, 400], [1326470400000, 500], [1326556800000, 1100], [1326643200000, 800], [1326729600000, 800], [1326816000000, 1100], [1326902400000, 1100], [1326988800000, 600], [1327075200000, 600], [1327161600000, 800], [1327248000000, 1100], [1327334400000, 1300], [1327420800000, 700], [1327507200000, 900], [1327593600000, 900], [1327680000000, 800], [1327766400000, 500], [1327852800000, 800], [1327939200000, 2500]);

        var dataset = [{
            label: "今年充值人数",
            data: data3,
            color: "#1ab394",
            bars: {show: true, align: "center", barWidth: 24 * 60 * 60 * 600, lineWidth: 0}
        }, {
            label: "往年充值人数",
            data: data2,
            yaxis: 2,
            color: "#464f88",
            lines: {lineWidth: 1, show: true, fill: true, fillColor: {colors: [{opacity: 0.2}, {opacity: 0.2}]}},
            splines: {show: false, tension: 0.6, lineWidth: 1, fill: 0.1},
        }];
        var options = {
            xaxis: {
                mode: "time",
                tickSize: [3, "day"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: "Arial",
                axisLabelPadding: 10,
                color: "#838383"
            },
            yaxes: [{
                position: "left",
                max: 1070,
                color: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: "Arial",
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#838383",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: " Arial",
                axisLabelPadding: 67
            }],
            legend: {noColumns: 1, labelBoxBorderColor: "#000000", position: "nw"},
            grid: {hoverable: false, borderWidth: 0, color: "#838383"}
        };

        function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime()
        }

        $.plot($("#flot-dashboard-chart"), dataset, options);
    });
</script>


</body>
</html>
